<template>
  <div>
    <div style="padding-bottom: 70px;">
      <image :src="card_img" class="card-img" />
      <scroll-view class="scroll-view_H" scroll-x="true" style="width: 98%;padding-left:15px;padding-right:15px;">
        <view id="'a'+index" class="scroll-view-item_H" v-for="(img,index) in picture_urls" :key="index" :class="[index===img_index ?'selected':'']">
          <image :src="img.url" class="card-img-item" @click="selectImg(img,index)"  />
          <van-icon v-if="index == img_index" name="checked" color="#00A760" size="18px" class="img-icon" />
        </view>
      </scroll-view>
      <div style="margin:15px;font-size:14px;">选择商品</div>
      <div class='cart-list-box' v-for="(item,index) in coupons" :key="index">
        <div class='list-info'>
          <div style="height:30px;line-height:30px;">{{item.name}}</div>
          <div>￥{{item.price/100}}</div>
        </div>
        <div style='width:50%;'>
          <div style="display:flex;height:50px;justify-content:flex-end;align-items:center;">
            <div v-if="item.num > 0" class="iconfont icon-jianhao" style="font-size:23px;" @click="reduceNumber(item,index)"></div>
            <div v-if="item.num > 0" style="padding-left:6px;padding-right:6px;width:20px;text-align:center;">{{item.num}}</div>
            <div class="iconfont icon-jiahao" style="font-size:27px;padding-right:12px;" @click="addNumber(item,index)"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="recharge-btn">
      <div style="width:60%;padding-left:15px;">
        <div style="font-size:10px;color:#A4A4A4;padding-top:15px;">{{sum_num}}份礼品</div>
        <div style="font-weight:bold;">￥{{sum_price}}</div>
      </div>
      <div class="btn" @click="submit">
        <div :class="[sum_num>0 ?'purchared':'purchare']">购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import {
  mapState,
  mapActions,
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      picture_urls:[],
      img_index:0,
      coupons:[],
      gift_card_tpl:{},
      card_img:'',
      sum_num:0,
      sum_price:0.00,
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    async submit(){
      if (this.sum_num == 0) {
        return
      }
      let give_coupons = []
      this.coupons.forEach(item=>{
        if (item.num > 0) {
          give_coupons.push(item) 
        }
      })
      let form = {
        brand_id:this.user.brand_id,
        user_id:this.user.id,
        user_name:this.user.name,
        give_coupons:give_coupons,
        background_pic:this.card_img,
        gift_card_tpl_id:this.gift_card_tpl.id
      }
      console.log('form=>',form)
      let res = await api.payGiftCard(form)
      if (res.code == 0) {
        wx.requestPayment({
          'timeStamp': res.data.timeStamp,
          'nonceStr': res.data.nonceStr,
          'package': res.data.package,
          'signType': res.data.signType,
          'paySign': res.data.paySign,
          success(result) {
            wx.showToast({
                title: '支付成功',
                icon: 'success'
            })
            wx.navigateTo({url: '/pages/user/gift_card/gift_card_detail?gift_card_id='+res.data.gift_card_id})
          },
          fail(result) {
              console.log('支付失败：', result)
          }
        })
      }
    },
    addNumber(item,index){
      let coupons = _.cloneDeep(this.coupons)
      coupons[index].num += 1
      this.coupons = coupons
      this.handleSelectCoupon()
    },
    reduceNumber(item,index){
      let coupons = _.cloneDeep(this.coupons)
      coupons[index].num -= 1
      this.coupons = coupons
      this.handleSelectCoupon()
    },
    handleSelectCoupon(){
      this.sum_num = 0
      this.sum_price = 0.00
      this.coupons.forEach(item=>{
        if (item.num > 0) {
          this.sum_num += Number(item.num)
          this.sum_price += item.price/100 * item.num
        }
      })
      this.sum_price = this.sum_price.toFixed(2)
    },
    selectImg(img,index){
      this.img_index = index
      this.card_img = img.url
    }
  },
  async onLoad (options) {
    this.img_index = 0
    this.sum_num = 0
    this.sum_price = 0.00
    let id = options.id
    let result = await api.getGiftCardTpls({id:id})
    if(result.code == 0){
      this.gift_card_tpl = result.data
      this.picture_urls = result.data.picture_urls
      this.card_img = this.picture_urls[0].url
      result.data.coupons.forEach(item=>{
        item.num = 0
      })
      this.coupons = result.data.coupons
    }
  }
}
</script>

<style>
.card-img{
  width: 90%;
  height: 150px;
  margin-left: 5%;
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100px;
  height: 60px;
  margin-right: 15px;
  border-radius: 10px;
  position: relative;
  margin-top: 20px;
}
.card-img-item{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.selected{
  border: 1px solid #00A760;
}
.img-icon{
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10000;
}
.cart-list-box{
  width: 100%;
  height: 60px;
  background:#FFFFFF;
  display:flex;
  font-size:16px;
  border-bottom:1px #E3E3E3 solid;
}
.list-info{
  width: 50%;
  height: 50px;
  padding-left: 15px;
}
.list-info-size{
  height: 30px;
  line-height: 30px;
}
.activity-color{
  color:#F05A86;
  margin-right: 10px;
}
.recharge-btn{
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 70px;
  display: flex;
  background: #FFF;
  font-size: 16px;
  border-top:1px #E3E3E3 solid;
}
.btn{
  width: 40%;
}
.purchare{
  width: 90px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  background: #F7F7F7;
  color: #A4A4A4;
  float: right;
  margin-top: 17px;
  margin-right: 18px;
  text-align: center;
}
.purchared{
  width: 90px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  background: black;
  color: white;
  float: right;
  margin-top: 17px;
  margin-right: 18px;
  text-align: center;
}
</style>